<template>
  <view class="history-container">
    <!-- 顶部状态栏 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="page-title">记录</view>
    </view>
    
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-dropdown" @tap="showFilterOptions">
        <text>{{ getFilterLabel(filterType) }}</text>
        <text class="dropdown-icon">▼</text>
      </view>
      <text class="batch-manage" @tap="toggleBatchManage">{{ isBatchManage ? '完成' : '批量管理' }}</text>
    </view>
    
    <!-- 记录列表 -->
    <scroll-view class="record-list" scroll-y="true" @scrolltolower="loadMoreRecords" :style="{ height: scrollHeight + 'px' }">
      <!-- 加载中提示 -->
      <view v-if="loading && !historyList.length" class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载历史记录中...</text>
      </view>
      
      <!-- 无数据提示 -->
      <view v-if="!loading && !historyList.length" class="empty-container">
        <view class="empty-icon">📋</view>
        <text class="empty-text">暂无试衣记录</text>
        <view class="try-button" @tap="goToTryOn">去试衣</view>
      </view>
      
      <!-- 记录列表内容 -->
      <block v-for="(monthData, monthIndex) in groupedHistoryList" :key="monthIndex">
        <view class="month-section">
          <view class="month-header">{{ monthData.month }}</view>
          
          <view 
            class="record-item" 
            v-for="(item, index) in monthData.records" 
            :key="item.id" 
            @tap="viewDetail(item)"
          >
            <view class="record-title">
              <text class="record-type">{{ item.title }}</text>
              <text class="record-date">{{ item.date }}</text>
              <view 
                v-if="isBatchManage" 
                class="select-checkbox" 
                @tap.stop="toggleSelect(item.id)"
                :class="{'selected': selectedIds.includes(item.id)}"
              ></view>
            </view>
            
            <view class="record-content">
              <!-- 左侧图片 -->
              <view class="outfit-image">
                <image :src="getValidImageUrl(item.image_url)" mode="aspectFill" @error="handleImageError($event, 'image', index)"></image>
              </view>
              
              <!-- 右侧内容区 -->
              <view class="content-right">
                <!-- 标签容器 -->
            <view class="tag-container">
              <view 
                v-for="(tag, tagIndex) in getTagsList(item.suitable)" 
                :key="'tag-s-' + tagIndex" 
                    class="tag premium-tag" 
              >{{ tag.name }}</view>
              
              <!-- 添加不适合的标签 -->
              <view 
                v-for="(tag, tagIndex) in getTagsList(item.not_suitable)" 
                :key="'tag-n-' + tagIndex" 
                class="tag gray-tag"
              >{{ tag.name }}</view>
                </view>
              
              <view class="review-btn" @tap.stop="viewDetail(item)">查看详情</view>
              </view>
            </view>
          </view>
        </view>
      </block>
      
      <!-- 底部加载更多 -->
      <view v-if="historyList.length && hasMoreData" class="loading-more">
        <view class="loading-spinner small"></view>
        <text>加载更多...</text>
      </view>
      
      <view v-if="historyList.length && !hasMoreData" class="no-more-data">
        <text>— 已经到底了 —</text>
      </view>
    </scroll-view>
    
    <!-- 批量管理操作条 -->
    <view class="batch-actions" v-if="isBatchManage">
      <view class="select-all" @tap="toggleSelectAll">
        <view class="select-checkbox" :class="{'selected': isAllSelected}"></view>
        <text>全选</text>
      </view>
      <view class="delete-btn" @tap="deleteSelected" :class="{'disabled': !selectedIds.length}">
        <text>删除</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 20,
      safeAreaBottom: 0,
      defaultImgUrl: '/static/easy-loadimage/loading.png',
      
      // 新增数据字段
      historyList: [], // 原始历史记录列表
      loading: false, // 加载状态
      page: 1, // 当前页数
      limit: 10, // 每页条数
      hasMoreData: true, // 是否有更多数据
      scrollHeight: 0, // 滚动区域高度
      
      // 筛选相关
      filterType: 'all', // 筛选类型
      filterLabels: {
        'all': '全部',
        'casual': '休闲穿搭',
        'business': '商务穿搭',
        'date': '约会穿搭',
        'sports': '运动穿搭',
        'family': '见家长穿搭'
      },
      // 中文标签对应的API参数值
      apiSceneValues: {
        'date': '约会',
        'casual': '休闲',
        'business': '商务',
        'sports': '运动',
        'family': '见家长'
      },
      
      // 场景类型映射
      sceneTypeValues: {
        'date': 1,      // 约会场景ID
        'casual': 2,    // 休闲场景ID
        'business': 3,  // 商务场景ID
        'party': 4      // 聚会场景ID
      },
      
      // 批量管理相关
      isBatchManage: false, // 是否处于批量管理状态
      selectedIds: [], // 已选中的ID列表
      isAllSelected: false, // 是否全选
    }
  },
  computed: {
    // 将历史记录按月份分组
    groupedHistoryList() {
      if (!this.historyList.length) return [];
      
      const groups = {};
      
      this.historyList.forEach(item => {
        // 提取月份信息
        const date = this.parseDate(item.date);
        const monthKey = this.isCurrentMonth(date) ? '本月' : '上个月';
        
        if (!groups[monthKey]) {
          groups[monthKey] = {
            month: monthKey,
            records: []
          };
        }
        
        groups[monthKey].records.push(item);
      });
      
      // 转换为数组并按月份排序
      return Object.values(groups).sort((a, b) => {
        if (a.month === '本月') return -1;
        if (b.month === '本月') return 1;
        return 0;
      });
    }
  },
  onLoad() {
    console.log('history页面加载...');
    this.getSystemInfo();
    this.navTab = 2;
    this.calculateScrollHeight();
    
    // 确认全局变量是否正确初始化
    if (getApp().globalData.needRefreshHistory === undefined) {
      console.log('初始化needRefreshHistory全局变量');
      getApp().globalData.needRefreshHistory = false;
    }
    
    this.loadHistoryRecords();
  },
  onShow() {
    console.log('history页面显示，检查是否需要刷新数据...');
    console.log('全局刷新标记状态:', getApp().globalData.needRefreshHistory);
    
    this.navTab = 2;
    
    // 如果从详情页返回，可能需要刷新数据
    if (getApp().globalData.needRefreshHistory) {
      console.log('检测到needRefreshHistory为true，开始刷新数据...');
      this.page = 1;
      this.historyList = [];
      this.hasMoreData = true;
      this.loadHistoryRecords();
      console.log('重置全局刷新标记为false');
      getApp().globalData.needRefreshHistory = false;
    }
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.page = 1;
    this.historyList = [];
    this.hasMoreData = true;
    this.loadHistoryRecords(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    // 获取系统信息
    getSystemInfo() {
      try {
        // 使用推荐的新API替代弃用的getSystemInfoSync
        const systemInfo = uni.getWindowInfo();
        this.statusBarHeight = systemInfo.statusBarHeight || 20;
        this.safeAreaBottom = systemInfo.safeAreaInsets 
          ? systemInfo.safeAreaInsets.bottom 
          : 0;
      } catch (e) {
        console.error('获取系统信息失败', e);
      }
    },
    
    // 计算滚动区域高度
    calculateScrollHeight() {
      try {
        // 使用推荐的新API
        const systemInfo = uni.getWindowInfo();
        const windowHeight = systemInfo.windowHeight;
        
        // 计算其他区域的高度
        const statusBarHeight = this.statusBarHeight;
        const navHeight = 90; // 导航栏高度
        const filterBarHeight = 64; // 筛选栏高度
        const tabsHeight = 50 + this.safeAreaBottom; // 底部导航栏高度
        
        // 计算滚动区域高度
        this.scrollHeight = windowHeight - statusBarHeight - navHeight - filterBarHeight - tabsHeight;
      } catch (e) {
        console.error('计算滚动高度失败', e);
        this.scrollHeight = 500; // 设置默认高度
      }
    },
    
    // 加载历史记录
    loadHistoryRecords(callback) {
      if (this.loading || (!this.hasMoreData && this.page > 1)) {
        if (callback) callback();
        return;
      }
      
      this.loading = true;
      console.log(`开始加载第${this.page}页历史记录数据...`);
      
      // 严格按照API文档规范构建请求参数
      const params = {
        user_id: uni.getStorageSync('uid'),
        page: this.page,
        limit: this.limit
      };
      
      // 如果有筛选条件，添加到参数中 - 主要以标题匹配为主
      if (this.filterType !== 'all') {
        // 获取当前选中的标签文本（如"见家长穿搭"）
        const titleText = this.filterLabels[this.filterType];
        
        // 仅使用最关键的参数，避免参数冲突
        params.title = titleText;           // 直接使用完整的标题文本
        params.keyword = titleText;         // 关键词搜索
        
        console.log(`应用筛选条件，类型=${this.filterType}，匹配标题=${titleText}`);
      }
      
      console.log('获取历史记录参数:', JSON.stringify(params, null, 2));
      
      // 使用项目实际的API域名
      const apiBaseUrl = 'https://test.zysemtime.com';
      
      // 获取全局配置的URL，如果为空则使用硬编码值
      const globalBaseUrl = getApp().globalData.HTTP_REQUEST_URL;
      console.log('全局配置的基础URL:', globalBaseUrl);
      
      // 如果全局URL存在，则使用全局URL，否则使用硬编码的URL
      const fullApiUrl = globalBaseUrl ? (globalBaseUrl + '/api/dress_history/list') : (apiBaseUrl + '/api/dress_history/list');
      console.log('使用的完整API URL:', fullApiUrl);
      
      // 获取token
      const token = uni.getStorageSync('token');
      console.log('当前登录状态:', token ? '已登录' : '未登录');
      console.log(params);
      
      uni.request({
        url: fullApiUrl,
        method: 'GET',
        header: {
          'Authorization': token
        },
        data: params,
        success: (res) => {
          console.log('获取历史记录响应状态码:', res.statusCode);
          console.log('获取历史记录响应数据:', JSON.stringify(res.data, null, 2));
          
          if (res.data && res.data.code === 200 && res.data.data) {
            // 处理数据
            let records = res.data.data.data || [];
            console.log(`获取到${records.length}条记录`);
            
            // 如果是筛选模式且返回的数据不为空，进行本地二次筛选确保数据准确
            if (this.filterType !== 'all' && records.length > 0) {
              console.log('进行本地二次筛选，确保只显示所选风格的记录');
              const filteredRecords = this.filterRecordsByTitle(records);
              
              console.log(`本地筛选: 原始${records.length}条 -> 筛选后${filteredRecords.length}条`);
              records = filteredRecords;
            }
            
            // 处理每条记录的数据格式，确保字段名称正确
            const formattedRecords = records.map(item => {
              // 格式化日期字段，将create_time转换为date字段
              const dateStr = item.create_time || '';
              const formattedDate = dateStr.split(' ')[0].replace(/\d{4}-/, ''); // 从"2025-04-21 15:21:27"提取为"04-21"
              
              // 记录详细信息用于调试
              const styleInfo = item.style || item.scene || item.type || '未指定';
              console.log(`处理记录ID:${item.id}, 标题:${item.title}, 日期:${formattedDate}, 风格:${styleInfo}`);
              
              return {
                ...item,
                date: formattedDate, // 添加date字段用于显示
                suitable: item.suitable || '',
                not_suitable: item.not_suitable || ''
              };
            });
            
            // 如果是第一页，则覆盖现有数据，否则追加
            if (this.page === 1) {
              this.historyList = formattedRecords;
              console.log('设置第一页数据，共', formattedRecords.length, '条');
            } else {
              this.historyList = [...this.historyList, ...formattedRecords];
              console.log('追加第', this.page, '页数据，当前共', this.historyList.length, '条');
            }
            
            // 判断是否还有更多数据
            const totalPages = res.data.data.last_page || 1;
            this.hasMoreData = this.page < totalPages;
            console.log('总页数:', totalPages, '当前是否有更多数据:', this.hasMoreData);
            
            // 页码自增
            if (formattedRecords.length > 0) {
              this.page++;
              console.log('页码自增到:', this.page);
            }
          } else {
            // 处理错误情况
            if (res.data && res.data.code === 401) {
              console.error('认证失败，需要登录:', res.data);
              uni.showToast({
                title: '请先登录',
                icon: 'none',
                duration: 2000
              });
            } else {
              console.error('获取历史记录失败，响应数据:', res.data);
              uni.showToast({
                title: res.data?.message || '获取历史记录失败',
                icon: 'none',
                duration: 2000
              });
            }
          }
        },
        fail: (err) => {
          console.error('获取历史记录失败:', err);
          console.error('错误详情:', JSON.stringify(err, null, 2));
          
          uni.showToast({
            title: '网络请求失败，请稍后再试',
            icon: 'none',
            duration: 2000
          });
        },
        complete: () => {
          this.loading = false;
          console.log('历史记录加载完成');
          if (callback) callback();
        }
      });
    },
    
    // 加载更多记录
    loadMoreRecords() {
      if (this.hasMoreData && !this.loading) {
        this.loadHistoryRecords();
      }
    },
    
    // 查看详情
    viewDetail(item) {
      if (this.isBatchManage) {
        this.toggleSelect(item.id);
        return;
      }
      
      uni.navigateTo({
        url: `/pages/AI_try_on/history_detail?id=${item.id}`
      });
    },
    
    // 去试衣页面
    goToTryOn() {
      uni.switchTab({
        url: '/pages/AI_try_on/home_page'
      });
    },
    
    // 处理图片加载错误
    handleImageError(e, type, index) {
      console.log(`${type}图片加载失败`, e);
      // 设置默认图片
      const defaultImg = '/static/easy-loadimage/loading.png';
      
      // 获取当前图片元素
      const currentTarget = e.currentTarget;
      if (currentTarget) {
        // 在小程序环境中，通过currentTarget更新图片src
        currentTarget.src = defaultImg;
      }
    },
    
    // 导航切换
    navSwitchTab(tabIndex) {
      if (this.navTab === tabIndex) return;
      
      this.navTab = tabIndex;
      
      switch(tabIndex) {
        case 0: // 首页
          uni.switchTab({
            url: '/pages/AI_try_on/new_tryai'
          });
          break;
        case 1: // 个人衣橱
          uni.switchTab({
            url: '/pages/AI_try_on/personal_wardrobe'
          });
          break;
        case 2: // 记录 - 当前页面，不需要跳转
          break;
      }
    },
    
    // 切换批量管理状态
    toggleBatchManage() {
      this.isBatchManage = !this.isBatchManage;
      // 退出批量管理时清空选择
      if (!this.isBatchManage) {
        this.selectedIds = [];
        this.isAllSelected = false;
      }
      
      // 重新计算滚动区域高度
      setTimeout(() => {
        this.calculateScrollHeight();
      }, 50);
    },
    
    // 切换选中状态
    toggleSelect(id) {
      const index = this.selectedIds.indexOf(id);
      if (index > -1) {
        this.selectedIds.splice(index, 1);
      } else {
        this.selectedIds.push(id);
      }
      
      // 检查是否全选
      this.isAllSelected = this.historyList.length > 0 && this.selectedIds.length === this.historyList.length;
    },
    
    // 切换全选状态
    toggleSelectAll() {
      if (this.isAllSelected) {
        // 取消全选
        this.selectedIds = [];
        this.isAllSelected = false;
      } else {
        // 全选
        this.selectedIds = this.historyList.map(item => item.id);
        this.isAllSelected = true;
      }
    },
    
    // 删除选中的记录
    deleteSelected() {
      if (!this.selectedIds.length) return;
      
      uni.showModal({
        title: '确认删除',
        content: `确定要删除已选中的${this.selectedIds.length}条记录吗？`,
        confirmColor: '#ff5c8d',
        success: (res) => {
          if (res.confirm) {
            this.performDelete();
          }
        }
      });
    },
    
    // 执行删除操作
    performDelete() {
      const deletePromises = this.selectedIds.map(id => {
        return new Promise((resolve, reject) => {
          // 修复API请求URL，使用完整的基础URL
          const baseUrl = getApp().globalData.HTTP_REQUEST_URL || '';
          
          uni.request({
            url: `${baseUrl}/api/dress_history/delete/${id}`,
            method: 'DELETE',
            header: {
              'Authorization': uni.getStorageSync('token')
            },
            success: (res) => {
              if (res.data && res.data.code === 200) {
                resolve(id);
              } else {
                reject(res.data?.message || '删除失败');
              }
            },
            fail: (err) => {
              reject('网络请求失败');
            }
          });
        });
      });
      
      // 显示加载中
      uni.showLoading({
        title: '删除中...'
      });
      
      Promise.all(deletePromises)
        .then(deletedIds => {
          // 删除成功，更新列表
          this.historyList = this.historyList.filter(item => !deletedIds.includes(item.id));
          this.selectedIds = [];
          this.isAllSelected = false;
          
          uni.hideLoading();
          uni.showToast({
            title: `成功删除${deletedIds.length}条记录`,
            icon: 'success',
            duration: 2000
          });
          
          // 如果删除后列表为空，且有更多页，加载下一页数据
          if (this.historyList.length === 0 && this.hasMoreData) {
            this.loadHistoryRecords();
          }
        })
        .catch(error => {
          uni.hideLoading();
          uni.showToast({
            title: error || '删除失败',
            icon: 'none',
            duration: 2000
          });
        });
    },
    
    // 显示筛选选项
    showFilterOptions() {
      console.log('点击了筛选按钮，打开选项列表');
      
      try {
        // 确保选项不超过6个
        const itemList = Object.values(this.filterLabels);
        console.log('筛选选项列表:', itemList, '长度:', itemList.length);
        
        if (itemList.length > 6) {
          console.error('选项数量超过6个，微信小程序限制最多6个选项');
          uni.showToast({
            title: '筛选选项过多',
            icon: 'none'
          });
          return;
        }
        
        uni.showActionSheet({
          itemList: itemList,
          success: (res) => {
            const selected = res.tapIndex;
            const filterTypes = Object.keys(this.filterLabels);
            const newFilterType = filterTypes[selected];
            
            console.log(`选择了选项索引: ${selected}, 对应类型: ${newFilterType}`);
            
            // 如果筛选类型没有变化，不需要重新加载
            if (this.filterType === newFilterType) {
              console.log(`筛选类型未变化，仍为: ${this.filterType}`);
              return;
            }
            
            // 设置筛选类型
            this.filterType = newFilterType;
            console.log(`选择了筛选类型：${this.filterType}，显示标签: ${this.filterLabels[this.filterType]}`);
            
            // 显示加载提示
            uni.showLoading({
              title: '加载中...'
            });
            
            // 重置页码并重新加载数据
            this.page = 1;
            this.historyList = [];
            this.hasMoreData = true;
            this.loadHistoryRecords(() => {
              uni.hideLoading();
              
              // 检查筛选结果
              if (this.historyList.length === 0 && this.filterType !== 'all') {
                uni.showToast({
                  title: '没有找到相关记录',
                  icon: 'none'
                });
              }
            });
          },
          fail: (err) => {
            console.error('筛选选项打开失败:', err);
            // 友好提示
            uni.showToast({
              title: '打开筛选选项失败',
              icon: 'none'
            });
          }
        });
      } catch (error) {
        console.error('显示筛选选项出错:', error);
        uni.showToast({
          title: '系统错误，请稍后重试',
          icon: 'none'
        });
      }
    },
    
    // 获取筛选标签文本
    getFilterLabel(type) {
      return this.filterLabels[type] || '全部';
    },
    
    // 解析日期字符串
    parseDate(dateStr) {
      if (!dateStr) return new Date(); // 处理空值情况
      
      try {
        // 处理"MM-DD"格式的日期
        const now = new Date();
        const year = now.getFullYear();
        
        // 如果包含空格，表示是带时间的格式，先提取日期部分
        const datePart = dateStr.includes(' ') ? dateStr.split(' ')[0] : dateStr;
        
        // 如果是yyyy-MM-DD格式，去掉年份部分
        const dateWithoutYear = datePart.includes('-') ? 
          datePart.replace(/^\d{4}-/, '') : datePart;
        
        // 分割月日
        const parts = dateWithoutYear.split('-');
        if (parts.length !== 2) return new Date(); // 格式不对时返回当前日期
        
        const [month, day] = parts.map(Number);
        return new Date(year, month - 1, day);
      } catch (e) {
        console.error('日期解析出错:', e, dateStr);
        return new Date(); // 出错时返回当前日期
      }
    },
    
    // 判断是否为当前月份
    isCurrentMonth(date) {
      const now = new Date();
      return date.getMonth() === now.getMonth();
    },
    
    // 获取标签列表
    getTagsList(tagsString) {
      if (!tagsString) return [];
      
      try {
        // 尝试解析JSON字符串
        let tags = [];
        
        if (typeof tagsString === 'string') {
          // 尝试解析JSON字符串
          try {
            tags = JSON.parse(tagsString);
          } catch (e) {
            // 如果解析失败，检查是否为逗号分隔的字符串
            if (tagsString.includes(',')) {
              tags = tagsString.split(',').map(tag => ({ name: tag.trim(), type: 'normal' }));
            } else {
              // 单个标签
              tags = [{ name: tagsString.trim(), type: 'normal' }];
            }
          }
        } else if (Array.isArray(tagsString)) {
          // 已经是数组格式
          tags = tagsString;
        }
        
        // 确保每个标签都有正确的格式
        return tags.map(tag => {
          if (typeof tag === 'string') {
            return { name: tag, type: 'normal' };
          } else if (typeof tag === 'object' && tag !== null) {
            return { 
              name: tag.name || '未知', 
              type: tag.type || 'normal' 
            };
          }
          return { name: '未知标签', type: 'normal' };
        });
      } catch (e) {
        console.error('解析标签出错:', e);
        return [];
      }
    },
    
    // 获取有效的图片URL
    getValidImageUrl(url) {
      if (!url) return this.defaultImgUrl;
      
      console.log('处理图片URL:', url);
      
      // 如果URL已经是完整URL，直接返回
      if (url.startsWith('http://') || url.startsWith('https://')) {
        return url;
      }
      
      // 如果URL是相对路径，添加基础URL
      const baseUrl = getApp().globalData.HTTP_REQUEST_URL || 'https://test.zysemtime.com';
      const formattedUrl = url.startsWith('/') ? url.substring(1) : url;
      const fullUrl = `${baseUrl}/${formattedUrl}`;
      
      console.log('完整URL:', fullUrl);
      return fullUrl;
    },
    
    // 本地二次筛选，确保只显示匹配的记录
    filterRecordsByTitle(records) {
      if (this.filterType === 'all' || !records.length) return records;
      
      // 获取当前选中的标签文本（如"见家长穿搭"）
      const titleText = this.filterLabels[this.filterType];
      console.log(`进行本地标题匹配筛选，目标标题: "${titleText}"`);
      
      const filteredRecords = records.filter(item => {
        // 优先匹配标题字段
        const itemTitle = (item.title || '').toLowerCase();
        
        // 完全匹配 - 如标题为"见家长穿搭"
        if (itemTitle === titleText.toLowerCase()) {
          return true;
        }
        
        // 部分匹配 - 如标题包含"见家长"
        // 从标题文本中提取场景部分（去掉"穿搭"）
        const scenePart = titleText.replace('穿搭', '').toLowerCase();
        if (itemTitle.includes(scenePart)) {
          return true;
        }
        
        // 检查更多字段
        const itemStyle = (item.style || '').toLowerCase();
        const itemScene = (item.scene || '').toLowerCase();
        const itemType = (item.type || '').toLowerCase();
        
        return (
          itemStyle.includes(scenePart) ||
          itemScene.includes(scenePart) ||
          itemType.includes(scenePart)
        );
      });
      
      console.log(`本地筛选: 原始${records.length}条 -> 筛选后${filteredRecords.length}条`);
      return filteredRecords;
    },
  }
}
</script>

<style lang="scss">
.history-container {
  min-height: 100vh;
  background-color: #fff5f8;
  display: flex;
  flex-direction: column;
  padding-bottom: 150rpx; // 为底部导航留出空间
}

.status-bar {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.nav-header {
  height: 90rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  position: relative;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
}

.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  letter-spacing: 1.5rpx;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 1rpx solid rgba(240, 240, 240, 0.8);
}

.filter-dropdown {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  background: rgba(248, 248, 248, 0.8);
  padding: 12rpx 22rpx;
  border-radius: 30rpx;
  transition: all 0.25s ease;
  min-width: 180rpx;
  justify-content: center;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  cursor: pointer;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
    background-color: transparent;
  }
  
  &:active {
    transform: scale(0.98);
    background: rgba(248, 248, 248, 0.9);
  }
}

.dropdown-icon {
  margin-left: 8rpx;
  font-size: 20rpx;
  color: #999;
}

.batch-manage {
  font-size: 26rpx;
  color: #ff6b9d;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  opacity: 0.9;
}

.record-list {
  flex: 1;
  overflow: hidden;
}

.month-section {
  padding: 22rpx 30rpx;
}

.month-header {
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(238, 238, 238, 0.8);
  font-weight: 500;
  letter-spacing: 0.5rpx;
}

.record-item {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 24rpx 0;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
  position: relative;
}

.record-item:active {
  transform: scale(0.98);
}

.record-title {
  display: flex;
  align-items: center;
  margin-bottom: 22rpx;
}

.record-type {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  letter-spacing: 0.5rpx;
}

.record-date {
  font-size: 24rpx;
  color: #999;
  opacity: 0.9;
  margin-right: 10rpx;
}

.record-content {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.outfit-image {
  width: 240rpx;
  height: 280rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
  flex-shrink: 0; /* 防止图片被压缩 */
}

.outfit-image image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.outfit-image:active image {
  transform: scale(1.03);
}

.content-right {
  flex: 1;
  padding: 0 0 0 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 260rpx; /* 与图片高度接近，保持平衡 */
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-height: 180rpx;
  overflow-y: auto;
}

.tag {
  font-size: 22rpx;
  color: #666;
  background-color: rgba(245, 245, 245, 0.8);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  margin-right: 16rpx;
  margin-bottom: 10rpx;
  letter-spacing: 0.5rpx;
}

.premium-tag {
  color: #e83e8c;
  background: linear-gradient(to right, rgba(255, 240, 245, 0.9), rgba(255, 228, 238, 0.9));
  border: 1px solid rgba(255, 182, 193, 0.3);
  box-shadow: 0 2rpx 6rpx rgba(255, 105, 180, 0.1);
  padding: 8rpx 18rpx;
  font-weight: 500;
  letter-spacing: 0.8rpx;
  position: relative;
  overflow: hidden;
}

.premium-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1rpx;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.gray-tag {
  color: #999;
  background-color: rgba(245, 245, 245, 0.8);
}

.review-btn {
  font-size: 24rpx;
  color: #ffffff;
  background-color: #ff6b9d;
  border-radius: 24rpx;
  padding: 10rpx 24rpx;
  text-align: center;
  align-self: flex-end;
  margin-top: auto;
  box-shadow: 0 4rpx 8rpx rgba(255, 107, 157, 0.15);
  letter-spacing: 0.5rpx;
}

.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  border-top: 1px solid rgba(240, 240, 240, 0.5);
  backdrop-filter: blur(10px);
  z-index: 100;
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12rpx 0;
    
    .tab-icon {
      font-size: 44rpx;
      margin-bottom: 6rpx;
      color: #aaa;
    }
    
    .tab-text {
      font-size: 24rpx;
      color: #999;
    }
    
    &.active {
      .tab-icon {
        color: #ff5c8d;
      }
      
      .tab-text {
        color: #ff5c8d;
        font-weight: bold;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: linear-gradient(to right, #ff7eb3, #ff4d8d);
        border-radius: 2rpx;
      }
    }
  }
}

/* 新增样式 */
.batch-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 101;
}

.select-all {
  display: flex;
  align-items: center;
}

.select-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  margin-right: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  
  &.selected {
    background-color: #ff6b9d;
    border-color: #ff6b9d;
    
    &::after {
      content: '';
      width: 18rpx;
      height: 10rpx;
      border-left: 2rpx solid #fff;
      border-bottom: 2rpx solid #fff;
      transform: rotate(-45deg) translate(2rpx, -2rpx);
    }
  }
}

.delete-btn {
  padding: 12rpx 40rpx;
  background: linear-gradient(to right, #ff6b9d, #ff4d7e);
  color: #fff;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  
  &.disabled {
    opacity: 0.5;
    background: #ccc;
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(255, 107, 157, 0.2);
  border-top: 4rpx solid #ff6b9d;
  border-radius: 50%;
  animation: spin 1s infinite linear;
  margin-bottom: 20rpx;
  
  &.small {
    width: 30rpx;
    height: 30rpx;
    border-width: 2rpx;
    margin-bottom: 0;
    margin-right: 10rpx;
  }
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.try-button {
  padding: 15rpx 50rpx;
  background: linear-gradient(to right, #ff6b9d, #ff4d7e);
  color: #fff;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  letter-spacing: 0.5rpx;
  box-shadow: 0 4rpx 10rpx rgba(255, 77, 125, 0.2);
}

.loading-more, .no-more-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #999;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 